<template>
  <div>
    <BaseTitle title="个人中心"/>
    <!-- <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png"> -->
    <div class="avatar" v-if="!userName">
      <img src="https://github.githubassets.com/images/modules/octocats/supportcat.jpg" alt="" srcset="">
      <p @click="login">登录/注册</p>
    </div>
     <div class="avatar" v-else>
      <img src="https://s11.mogucdn.com/mlcdn/c45406/200902_4ad5eec25lle00fic3efe2l84k8a0_5999x7996.jpg_640x960.v1cAC.70.jpg">
      <p class="usename">欢迎您：{{userName}}</p>
      <p @click="loginOut">退出登录</p>
    </div>
    <van-cell-group>
      <van-cell icon="balance-list-o" title="全部订单" is-link @click="myOrder"/>
      <van-cell icon="goods-collect-o" title="我的收藏" is-link @click="collection"/>
      <van-cell icon="free-postage" @click="address" title="地址管理" is-link />
      <van-cell icon="gift-card-o" title="最近浏览" is-link @click="browse"/>
      <van-cell icon="manager-o" title="关于我们" is-link @click="undone"/>
    </van-cell-group>
    <router-view/>
  </div>
</template>

<script>
import BaseTitle from 'components/BaseTitle'
import {mapGetters,mapMutations} from 'vuex'
import { Toast } from 'vant';
export default {
  components: {
    BaseTitle
  },

  computed: {
    ...mapGetters(['userName'])
  },

  methods: {
    ...mapMutations({
      setName: 'USERNAME'
    }),
    undone() {
      Toast({
        duration: 1000,
        message: '暂未开放',
        type: 'fail'
      });
    },
    login() {
      this.$router.push({'path':'/user/login'})
    },

    address() {
      if (this.userName) {
          this.$router.push({'path':'/user/address'})
      } else {
          this.$router.push({'path':'/user/login'})
      }
    },

    collection() {
      this.$router.push({path: '/user/collection'})
    },

    // 退出登录
    loginOut() {
      this.$http.post('/api/user/loginOut').then(res => {
        console.log(res.data);
        if (res.data.status == 0) {
          window.location.reload();
          localStorage.clear();
        }
      })
    },

    // 最近浏览
    browse() {
      this.$router.push({path: '/my/browse'})
    },

    myOrder() {
       this.$router.push({path: '/my/order'})
    }
  }
};
</script>

<style lang="less" scoped>
.avatar {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  background: #e8b8b6;
  padding: 10% 0 10% 0;
  box-sizing: border-box;
  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  p {
    color: #fff;
    font-size: 14px;
    margin-top: 20px;
  }
}
.user {
  &-poster {
    width:100%;
    height: 100%;
    display: block;
  }
  &-group {
    margin-bottom: .3rem;
  }
  &-links {
    padding: 15px 0;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
      margin-bottom: 10px;
    }
  }
}
.van-cell {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  overflow: hidden;
  align-items: center;
  .van-cell__left-icon {
    font-size: 16px;
    line-height: 24px;
    margin-right: 5px
  }
  .van-cell__right-icon {
    color: #999;
    font-size: 12px;
    line-height: 35px;
    margin-left: 5px
  }
}
.usename {
  font-weight: 700;
  font-size: 18px!important
}
</style>
